<template>
  <q-page padding class="">
    <div class="text-h5 q-pa-md">
      通知中心
    </div>
    <!-- 学生口的配置 学生需要看到项目的批准状态、接受其他同学的批准、历史信息--注意！如果规定时间内没有批准，那么强行将其设置为过期,防止有人卡bug -->
    <!-- 同时还要有方式限制教师批准……这个之后再做吧（通过扩展实现） -->
    <div class="row q-col-gutter-md">
      <div class="col-12 col-md-6">
        <q-card>
          <q-tabs
            v-model="tab"
            class="text-grey"
            active-color="primary"
            indicator-color="primary"
          >
            <q-tab name="response" label="待我同意">
              <q-badge color="orange" floating transparent rounded v-if="meAccept.length !== 0">{{meAccept.length}}</q-badge>
            </q-tab>

            <q-tab name="all" label="待其他人同意">
              <q-badge color="orange" floating transparent rounded v-if="otherAccept.length !== 0">{{otherAccept.length}}</q-badge>
            </q-tab>

            <q-tab name="rejected" label="已拒绝">
              <q-badge color="orange" floating transparent rounded v-if="rejected.length !== 0">{{rejected.length}}</q-badge>
            </q-tab>
          </q-tabs>

          <q-separator />

          <q-tab-panels v-model="tab" animated>
            <q-tab-panel name="response">
              <!-- 这里我们要设计一个列表，如何用简洁的方式展示呢？ -->
              <div class="q-pa-lt">
                <q-list>
                  <template v-for="(comp, idx) in meAccept" :key="idx">
                    <q-item clickable v-ripple @click="$router.push(`/detail/${comp.pk}`)">
                      <q-item-section avatar>
                        <y-auto-head-icon :imgBase="imgBase" :user="comp.join_list[0]"/>
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>{{comp.cate_name}}{{!!comp.cate.collect_part === 'name' ? '-' + comp.name : ''}}</q-item-label>
                        <q-item-label caption>已同意：{{comp.join_list.filter(o => o.status === 'acc').map(o => o.name).join('、')}}</q-item-label>
                        <q-item-label caption>未答复：{{comp.join_list.filter(o => o.status === 'unn').map(o => o.name).join('、')}}</q-item-label>
                      </q-item-section>
                    </q-item>

                    <q-separator/>
                  </template>
                  <template v-if="meAccept.length === 0">
                    暂无内容
                  </template>

                </q-list>
              </div>
            </q-tab-panel>
            <q-tab-panel name="all">
              <!-- 这里我们要设计一个列表，如何用简洁的方式展示呢？ -->
              <div class="q-pa-lt">
                <q-list>

                  <template v-for="(comp, idx) in otherAccept" :key="idx">
                    <q-item clickable v-ripple @click="$router.push(`/detail/${comp.pk}`)">
                      <q-item-section avatar>
                        <q-avatar>
                          <y-auto-head-icon :imgBase="imgBase" :user="comp.join_list[0]"/>
                        </q-avatar>
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>{{comp.cate_name}}{{!!comp.cate.collect_part === 'name' ? '-' + comp.name : ''}}</q-item-label>
                        <q-item-label caption>已同意：{{comp.join_list.filter(o => o.status === 'acc').map(o => o.name).join('、')}}</q-item-label>
                        <q-item-label caption>未答复：{{comp.join_list.filter(o => o.status === 'unn').map(o => o.name).join('、')}}</q-item-label>
                      </q-item-section>
                    </q-item>

                    <q-separator/>
                  </template>
                  <template v-if="otherAccept.length === 0">
                    暂无内容
                  </template>

                </q-list>
              </div>
            </q-tab-panel>

            <q-tab-panel name="rejected">
              <q-list>

                  <template v-for="(comp, idx) in rejected" :key="idx">
                    <q-item clickable v-ripple @click="$router.push(`/detail/${comp.pk}`)">
                      <q-item-section avatar>
                        <q-avatar>
                          <y-auto-head-icon :imgBase="imgBase" :user="comp.join_list[0]"/>
                        </q-avatar>
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>{{comp.cate_name}}{{!!comp.cate.collect_part === 'name' ? '-' + comp.name : ''}}</q-item-label>
                        <q-item-label caption>拒绝人：{{comp.join_list.filter(o => o.status === 'rej')[0].name}}</q-item-label>
                        <q-item-label caption>拒绝理由：{{comp.join_list.filter(o => o.status === 'rej')[0].msg}}</q-item-label>
                      </q-item-section>
                    </q-item>

                    <q-separator/>
                  </template>
                  <template v-if="rejected.length === 0">
                    暂无内容
                  </template>

                </q-list>
            </q-tab-panel>
          </q-tab-panels>
        </q-card>

      </div>

      <div class="col-12 col-md-6">
        <div>审核流程</div>
        <ol>
          <li>学生提出审核</li>
          <li>所有学生成员同意</li>
          <li>所有教师同意</li>
        </ol>
        <div>审核时点击对应项目进入详情页面，如果内容无误，点击下方对应按钮完成审核！</div>
      </div>
    </div>
  </q-page>
</template>

<script>
import { ref } from 'vue'
import { mapGetters } from 'vuex'
import yAutoHeadIcon from 'src/components/y-auto-head-icon.vue'

export default {
  components: { yAutoHeadIcon },
  data () {
    return {
      tab: ref('response')
    }
  },
  computed: {
    ...mapGetters('comp', {
      meAccept: 'getMeAccept',
      otherAccept: 'getOtherAccept',
      rejected: 'getRejected'
    })
  },
  methods: {
    // 现在我们要生成文本，说明谁同意了 谁没同意
    getAcceptedPeopleName (owner, idList) {
      const list = []
      owner.forEach(o => {
        // 如果在idList里面 说明在呢
        if (idList.indexOf(o.sid) !== -1) {
          list.push(o.name)
        }
      })
      return list
    },

    getNotAcceptedPeopleName (owner, idList) {
      const list = []
      owner.forEach(o => {
        // 如果在idList里面 说明在呢
        if (idList.indexOf(o.sid) === -1) {
          list.push(o.name)
        }
      })
      return list
    },

    getNameById (pList, pid) {
      let name = ''
      pList.forEach(p => {
        if (p.sid === pid) {
          name = p.name
        }
      })
      return name
    }
  }
}
</script>
